<template>
  <div class="tricolor_main" :class="{ 'green_main':changeSkin}">
    <MainNav />
    <!-- 下面整体的页面 -->
    <div class="whole_main_blue" :class="{ 'nav_green':changeSkin}">
      <div class="whole_left_main">
        <div class="whole_title">综合告警信息</div>
        <!-- 告警信息展示 -->
        <div class="two_title">列表滚动</div>
        <!-- 告警信息展示列表 -->
        <div class="zs_list">
          <div class="title_box">
            <div class="title_item">日期</div>
            <div class="title_item">预警事项</div>
            <div class="title_item">预警原因</div>
            <div class="title_item">预警级别</div>
            <div class="title_item">预警状态</div>
          </div>
          <div class="tableBox" ref="tableBox">
            <div class="list_item" v-for="(item, index) in 20" :key="item.id">
              <div class="item">000{{ index }}</div>
              <div class="item">突发事件{{index+1}}</div>
              <div class="item">暴雨</div>
              <div class="item">三级</div>
              <div class="item">战时</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="whole_center_main">
        <div class="early_box">
          <div class="early_total_box">
          <!-- 五角星 -->
          <div class="nav1">
            <img v-if="!changeSkin" src="../../assets/images/sImg/nav1-bg.png" alt="" />
            <img v-if="changeSkin"  src="../../assets/images/sImg/nav1-bg1.png" alt="" />
            <div class="nav1_red">
              <img src="../../assets/images/sImg/nav1.png" alt="" />
            </div>
          </div>
          <div class="nav2">
            <img v-if="!changeSkin" src="../../assets/images/sImg/nav2-bg.png" alt="" />
            <img v-if="changeSkin"  src="../../assets/images/sImg/nav2-bg1.png" alt="" />
            <div class="nav2_yel">
              <img src="../../assets/images/sImg/nav2.png" alt="" />
            </div>
          </div>
          <div class="nav3">
            <MainEchar :MaxNum="MaxNum"/>
            <div class="nav3_num">
              <div class="num">{{getMaxNum}}</div>
              <div class="text">综合告警指数</div>
            </div>
            <img v-if="!changeSkin" class="nav3_img" src="../../assets/images/sImg/nav3-bg.png" alt="" />
            <img v-if="changeSkin"  class="nav3_img" src="../../assets/images/sImg/nav3-bg1.png" alt="" />
          </div>
          <!-- 地图 -->
          <!-- 三盏灯 -->
          <div class="lamp_box flex_c_c">
            <div class="lamp_item green active"></div>
            <div class="lamp_item yellow"></div>
            <div class="lamp_item red"></div>
          </div>
          <!-- 里面的两个小图表 -->
          <div class="min_chart_box flex_s_c">
            <div class="min_chart">
              <MinMainEchar :MmeNum="MmeNum"/>
              <div class="min_lamp p-c">
                <img
                  class="lamp"
                  src="../../assets/images/sImg/g-y.png"
                  alt=""
                />
                <img
                  class="lamp red"
                  src="../../assets/images/sImg/r-n.png"
                  alt=""
                />
                <img
                  class="lamp"
                  src="../../assets/images/sImg/y-n.png"
                  alt=""
                />
              </div>
              <div class="title p-c">军队资产</div>
            </div>
            <div class="min_chart">
              <MinMainEchar :MmeNum="MmeNum"/>
              <div class="min_lamp p-c">
                <img
                  class="lamp"
                  src="../../assets/images/sImg/g-y.png"
                  alt=""
                />
                <img
                  class="lamp red"
                  src="../../assets/images/sImg/r-n.png"
                  alt=""
                />
                <img
                  class="lamp"
                  src="../../assets/images/sImg/y-n.png"
                  alt=""
                />
              </div>
              <div class="title p-c">军队资产</div>
            </div>
          </div>
          <!-- 指针 -->
        </div>
        <div class="early_index_box">
          <div class="early_index_item" v-for="(item, index) in 4" :key="item">
            <div class="chart_box">
              <MeterEchar :MeterNum="MeterNum"/>
            </div>
            <div class="index_title">平时综合保障指数</div>
          </div>
        </div>
        </div>
        
        <div class="early_Jump_box">
          
          <div class="early_Jump_title">
            <img src="@/assets/images/sImg/xx.png" alt="" />
            <div class="Jump_title_item" @click="$router.push('/ComprehensiveSupport')">
              列表组件
            </div>
            <div class="Jump_title_item" @click="$router.push('/photograph')">
              电脑拍照
            </div>
            <div class="Jump_title_item" @click="$router.push('/MilitaryLogistics')">
              扫码组件
            </div>
            <div class="Jump_title_item" @click="$router.push('/AlarmConfiguration')">
              告警模型配置
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="whole_right_main">
        <!-- 军队资产预警信息 -->
        <div class="whole_title">军队资产预警信息</div>
        <div class="whole_zc_info">
          <div class="title_wrap flex_s_c">
            <div
              class="title_item flex_c_c"
              v-for="item in zcTitle"
              :key="item.id"
              :class="{ active: item.id == zcActive }"
              @click="zcActive = item.id"
            >
              {{ item.title }}
            </div>
          </div>
          <!-- 存量资产 -->
          <div v-if="zcActive == 1" class="zc_cont_box">
            <div class="zc_cont_title">存量资产数</div>
            <ProgressBar/>
            <div class="water_polo_box" v-if="isZiChan"  @click="isZiChan=false">
              <LiquidFill Ltext="数量" Tcolor="red" :LiquidNum="LiquidNum"/>
              <LiquidFill Ltext="质量" Tcolor="green" :LiquidNum="LiquidNum"/>
              <LiquidFill Ltext="效期" Tcolor="yellow" :LiquidNum="LiquidNum"/>
            </div>
            <div class="water_huan_box" v-if="!isZiChan">
              <div class="go_back" @click="isZiChan=true">《 返回</div>
              <div class="chart_title">
                <div class="tit_item"><span class="dian1"></span> 预警</div>
                <div class="tit_item"><span class="dian2"></span> 关注</div>
                <div class="tit_item"><span class="dian3"></span> 正常</div>
              </div>
              <div class="chart_wrap">
                <div class="chart_box">
                  <PieChart title="数量" />
                </div>
              </div>
            </div>
          </div>
          <!-- 时间格式 -->
          <div v-if="zcActive == 2" class="zc_cont_box">
            <div class="zc_chart_box" v-if="zcChange == 1">
              <p>当前标准时间: {{ time }}</p>
              <p>时间戳: {{ time.getTime() }}</p>
              <p>时间格式化: {{timestamp(time.getTime()/1000,"Y-M-D h:m:s")}}</p>
              <p>转为带t的时间：{{ time.toISOString() }}</p>
              <p>数字前补0: {{formatNumberForTimestamp(1)}}</p>
              <p>秒数转为时分秒：{{formateSeconds(245464)}}</p>
            </div>
          </div>
          <!-- 行业监督 -->
          <div v-if="zcActive == 3" class="zc_cont_box">
            <div class="zc_chart_box" v-if="hyChange == 2">
              <Radar :xData="indicator" :yData="yData" />
            </div>
          </div>
          <!-- 重点信息 -->
          <div v-if="zcActive == 4" class="zc_cont_box">
            <WordCloud :wordData="wordData" :sizeRange="[10, 36]" />
          </div>
        </div>
        <!-- 军事物流预警信息 -->
        <div class="whole_title whole_title02">军事物流预警信息</div>
        <div class="whole_zc_info">
          <div class="title_wrap flex_s_c">
            <div
              class="title_item flex_c_c"
              v-for="item in wlTitle"
              :key="item.id"
              :class="{ active: item.id == wlActive }"
              @click="wlActive = item.id"
            >
              {{ item.title }}
            </div>
          </div>
          <!-- 能力底数 -->
          <div v-if="wlActive == 1" class="wl_chart_box">
            <div class="zc_cont_title">能力底数</div>
            <ProgressBar/>
            <div class="water_polo_box">
              <div class="ther_box">
                <div class="ther_box_item">
                  <Thermometer Tcolor="red"/>
                </div>
                <div class="ther_box_text">保障力量</div>
              </div>
              <div class="ther_box">
                <div class="ther_box_item">
                  <Thermometer Tcolor="yellow"/>
                </div>
                <div class="ther_box_text">保障设施</div>
              </div>
              <div class="ther_box">
                <div class="ther_box_item">
                  <Thermometer Tcolor="green"/>
                </div>
                <div class="ther_box_text">运输投送</div>
              </div>
              <div class="ther_box">
                <div class="ther_box_item">
                  <Thermometer Tcolor="yellow"/>
                </div>
                <div class="ther_box_text">地方动员</div>
              </div>
            </div>
          </div>
          <!-- 物资消耗 -->
          <div v-if="wlActive == 2" class="wl_chart_box">
            <div class="chart_title pd2">
              <div class="tit_item"><span class="dian1"></span> 预警</div>
              <div class="tit_item"><span class="dian2"></span> 关注</div>
              <div class="tit_item"><span class="dian3"></span> 正常</div>
            </div>
            <div class="chart_box">
              <BarChart
                :series="series1"
                :series2="series2"
                :series3="series3"
                :yAxios="yAxios"
              />
            </div>
          </div>
          <!-- 物流动态 -->
          <div v-if="wlActive == 3" class="wl_chart_box">
            <div class="chart_title pd2">
              <div class="tit_item"><span class="dian1"></span> 预警</div>
              <div class="tit_item"><span class="dian2"></span> 关注</div>
              <div class="tit_item"><span class="dian3"></span> 正常</div>
            </div>
            <div class="chart_box">
              <BarChart
                :series="wlSeries1"
                :series2="wlSeries2"
                :series3="wlSeries3"
                :yAxios="wlYxios"
              />
            </div>
          </div>
          <!-- 突发事件 -->
          <div v-if="wlActive == 4" class="wl_chart_box">
            <WordCloud :wordData="wordData" :sizeRange="[1, 20]" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainNav from "../../components/MainNav.vue";
import PieChart from "./components/PieChart.vue";
import BarChart from "./components/BarChart.vue";
import Radar from "./components/Radar.vue";
import ScatterEchart from "./components/ScatterEchart.vue";
import YbChart from "./components/YbChart.vue";
import WordCloud from "./components/WordCloud.vue";
import LiquidFill from "@/components/LiquidFill.vue";
import ProgressBar from "../../components/ProgressBar.vue";
import Thermometer from "../../components/Thermometer.vue";
import MeterEchar from "@/components/MeterEchar.vue";
import MainEchar from "@/components/MainEchar.vue";
import MinMainEchar from "@/components/MinMainEchar.vue";
import { zcTitle, wlTitle, series , wordData, indicator, wlSeries} from "./indexData.js"
export default {
  name: "RadarChart",
  components: {
    MainNav,
    PieChart,
    BarChart,
    Radar,
    ScatterEchart,
    YbChart,
    WordCloud,
    LiquidFill,
    ProgressBar,
    Thermometer,
    MeterEchar,
    MainEchar,
    MinMainEchar
  },
  props: {},
  data() {
    return {
      MaxNum: Math.floor(Math.random() * 100),
      MmeNum: Math.floor(Math.random() * 100),
      MeterNum: Math.floor(Math.random() * 49+1),
      LiquidNum: Math.floor(Math.random() * 49+1),
      isZiChan: true,
      isLeftMenu: true,
      isRightMenu: true,
      isRightMenu: true,
      zcActive: 1,
      wlActive: 1,
      zcTitle,
      wlTitle,
      series1: series.series1,
      series2: series.series2,
      series3: series.series3,
      yAxios: series.yAxios,

      wlSeries1: wlSeries.wlSeries1,
      wlSeries2: wlSeries.wlSeries2,
      wlSeries3: wlSeries.wlSeries3,
      wlYxios: wlSeries.wlYxios,

      indicator,
      wordData,
      yData: [90, 70, 60, 87, 68],
      zcChange: 1,
      hyChange: 2,
      lamp: "green",
      changeSkin: false,



      scrollStop: null,


      time: new Date(),
    };
  },
  computed: {
    getMaxNum(){
      setTimeout(()=>{
        this.MaxNum = Math.floor(Math.random() * 99+1);
        this.MmeNum = Math.floor(Math.random() * 49+1);
        this.MeterNum = Math.floor(Math.random() * 49+1);
        // this.LiquidNum = Number((Math.random()/5).toFixed(1));
        this.LiquidNum = Math.floor(Math.random() * 49+1);
        
      }, 10000)
      return this.MaxNum
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.skinEdition()
    this.$nextTick(()=>{
      this.setScroll()
    })
  },
  methods: {
    // 页面背景色切换
    skinEdition(){
      this.$watch("$store.state.SkinEdition", function(newValue, oldValue) {
        if(newValue=="default"){
          this.changeSkin= false
        }else{
          this.changeSkin= true
        }
      },{
        immediate: true
      });
    },
    // 设置滚动
    setScroll() {
      this.scrollStop && clearInterval(this.scrollStop)
      const tableBox = this.$refs.tableBox
      const divData = tableBox
      var flag = true
      divData.addEventListener('mouseover', (e) => {
        if (this.scrollStop) {
          flag = false
          clearInterval(this.scrollStop)
          this.scrollStop = null
        }
      })
      // 移出事件
      divData.addEventListener('mouseout', (e) => {
        if (this.scrollStop === null) {
          flag = true
          this.setScroll()
        }
      })
      console.log(divData.clientHeight , divData.scrollTop, divData.scrollHeight)
      this.scrollStop = setInterval(() => {
        if (flag) {
          divData.scrollTop += 1
          if (Math.ceil(divData.clientHeight + divData.scrollTop) >= divData.scrollHeight) {
            divData.scrollTop = 0
          }
          // if (Math.ceil(divData.clientHeight + divData.scrollTop) >= divData.scrollHeight) {
          //   this.yjxxList.push(this.yjxxList.shift())
          //   divData.scrollTop -= divData.clientHeight/7
          // }
        }
      }, 50)
    },
    
  },
};
</script>

<style lang="less" scoped>
@import './styles/index.less';
</style>